<template>
	<view>
		<uni-list>
			<uni-list-item v-for="(item, index) in tagList" :key="index" :title="item.tagName" :note="item.tagCode"
				:rightText="item.time" :show-extra-icon="true"
				:extra-icon="{color: '#c1d9c6',size: '22',type: 'paperclip'}" to="">
				<template v-slot:footer style="margin: 0;">
					<view style="align-items: center;">
						<button @click.stop="toggle($refs.popup1,item,'bottom')" style="border-style: none;"
							plain="true">
							<uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons>
						</button>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<uni-popup ref="popup1" background-color="#fff" @change="change" style="bor">
			<view>
				<uni-list>
					<uni-list-item :clickable="true" class="menu-item" @click="edit()">
						<template v-slot:body>
							<view class="menu-item-box">
								编辑
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :clickable="true" class="menu-item">
						<template v-slot:body>
							<view style="color: #FF5A5F;" class="menu-item-box">
								删除
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :clickable="true" class="menu-item" @click="closepopup">
						<template v-slot:body>
							<view class="menu-item-box">
								返回
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</uni-popup>
		<FabBtn btnValue="新增" :callback="fabClick"></FabBtn>
	</view>
</template>

<script>
	import FabBtn from "@/components/FabBtn.vue";
	import request from "@/common/request.js";
	export default {
		components: {
			FabBtn
		},
		data() {
			return {
				pageSize: 6,
				tagList: [{
						time: "",
						tagName: "tag1",
						tagCode: "dhiN2D"
					},
					{
						time: "",
						tagName: "ta2",
						tagCode: ""
					},
					{
						time: "",
						tagName: "tag3",
						tagCode: ""
					}
				]
			}
		},
		methods: {
			fabClick() {
				uni.navigateTo({
					url: './create_label'
				})
			},
			/* 展开编辑弹窗*/
			toggle(e, item, type) {
				this.type = type;
				this.item = item;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				e.open(type)
			},
			/* 弹窗状态变化触发 */
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			/* 关闭弹窗 */
			closepopup() {
				this.$refs.popup1.close()
			},

			//进入编辑页面
			edit() {
				var transform_data = this.item;
				this.closepopup();	//关闭弹出层

				uni.navigateTo({
					url: "./edit_label",
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: (data) => {
							console.log("acceptDataFromOpenedPage: " + data.tagName)
						},
						someEvent: (data) => {
							console.log(data)
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', transform_data)
					}
				})

			},


			/* 载入表单数据 */
			LoadData(pageNum) {
				let Param = {
					pageNum: pageNum,
					pageSize: this.pageSize
				};

				let opts = {
					url: '/business/label/list',
					method: 'get'
				};

				console.log("加载标签信息");

				uni.showLoading({
					title: '加载中'
				});

				request.httpTokenRequest(opts, Param).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res);
						this.tagList = res.data.data;
					} else {
						console.log("请求失败");
					}
				});
			}


		}
	}
</script>

<style>
	.fab-button {
		position: fixed;
		bottom: 80px;
		right: 25px;
		width: 65px;
		height: 65px;
		line-height: 65px;
		border-radius: 50%;
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 28px 0 rgba(0, 0, 0, 0.19);
		font-size: 5px;
	}

	.menu-item {
		width: 100%;
	}

	.menu-item-box {
		width: 100%;
		text-align: center;
		align-items: center;
	}
</style>
